<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>数字输入框组件</title>
		<style>
			.inputNumber{
				width: 170px;
				height: 30px;
				border: 1px solid #ccc;
				border-radius: 6px;
				outline: none;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<input-number v-model="value" :max="max" :min="min"></input-number>
			<script type="text/x-template" id="input">
				<div class="input-number">
					<input type="text" :value="currentValue" @change="handleChange" />
					<button @click="handleDown" :disabled="currentValue<=min">-</button>
					<button @click="handleUp" :disabled="currentValue>=max">+</button>
				</div>
			</script>
		</div>
		<script src="../js/vue2.5.js"></script>
		<script>
//			正则判断输入的是否是数字
			function isValueNumber(value){
				return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value+'');
			}
			var vm = new Vue({
				el: '#app',
				data: {
					value: 5,
					max : 10,
					min : 0
				},
				components: {
					'input-number': {
						template: '#input',
						props: {
							max: {
								type: Number,
							},
							min: {
								type: Number,
							},
							value: {
								type: Number
							}
						},
						data(){
							return{
								currentValue : this.value
							}
						},
						watch:{
							currentValue:function(val){
								this.$emit('input',val);
							},
							value:function(val){
								this.updateValue(val)	
							}
						},
						methods:{
							handleDown:function(){
								if(this.currentValue<=this.min){
									return
								}
								this.currentValue-=1;
							},
							handleUp:function(){
								if(this.currentValue>=this.max){
									return
								}
								this.currentValue+=1;
							},
							updateValue : function(val){
								if(val>this.max){
									val = this.max
								}
								if(val<this.min){
									val = this.min
								}
								this.currentValue = val;
							},
							handleChange:function(event){
								var val = event.target.value.trim();
								var max = this.max;
								var min = this.min;
								if(isValueNumber(val)){
									val = Number(val);
									this.currentValue = val;
									if(val>max){
										this.currentValue = max;
									}
									else if(val<min){
										this.currentValue = min;
									}
								}else{
									event.target.value = this.currentValue;
								}
							}
						},
						mounted(){
							this.updateValue(this.value);
						}
					}
				}
			})
		</script>
	</body>

</html>